<template>
	<!-- 
	 box1是父元素，box2是子元素，
	 现在：当点击box2时，box1的样式也会被触发
	 期望：点击box2时，box1不被影响，阻止冒泡；
	 
	 实现： hover-stop-propagation
	 
	 -->
	<view class="box1" hover-class="box1h" hover-stay-time="0">
		父组件
		<view class="box2" hover-class="box2h" hover-stay-time="0" hover-stop-propagation>子组件1</view>
	</view>
	
	<view>---------------</view>
	
	<text selectable>text文本标签</text>
	
	<view class="box3">scroll-view滑动:</view>
	<scroll-view scroll-x class="scroll-view">
		<view class="boxs">scroll子元素1</view>
		<view class="boxs">scroll子元素</view>
		<view class="boxs">scroll子元素</view>
		<view class="boxs">scroll子元素</view>
		<view class="boxs">scroll子元素</view>
		<view class="boxs">scroll子元素</view>
		<view class="boxs">scroll子元素</view>
		<view class="boxs">scroll子元素</view>
		<view class="boxs">scroll子元素</view>
		<view class="boxs">scroll子元素</view>
		<view class="boxs">scroll子元素</view>
		<view class="boxs">scroll子元素</view>
		
	</scroll-view>
	
	<!-- <view class="">跳转到demo1</view> -->
	<navigator url="/pages/demo1/demo1">跳转到demo1</navigator>
	
</template>

<script setup>

</script>

<style lang="scss">
	.box1 {
		width: 200px;
		height: 200px;
		border: 1px solid red;

		.box2 {
			width: 150px;
			height: 150px;
			border: 1px solid blue;
		}

		.box2h {
			background: orange;
		}
	}

	.box1h {
		width: 300px;
		height: 200px;
		background: blanchedalmond;
	}
	.box3{
		margin-top: 20px;
	}
	.scroll-view{
		width: 100%;
		height: 200px;
		background: gainsboro;
		white-space: nowrap;//元素在一行，不换行
		margin-bottom: 20px;
		.boxs{
			width: 100px;
			height: 100px;
			background: yellow;
			margin: 5px;
			display: inline-block; //将元素变成行内块级元素，实现既可以在一行展示，有可以保持宽高
		}
	}
</style>